<template>
  <Grid :col="1" :border="false">
    <GridItem class="grid-item">
      <Button label="default" type="primary" @click="addSystem" v-auth:sys:add
              style="margin-right: 5px">
        <Icon type="md-add-circle"/>
        添加系统
      </Button>

      <Button label="default" type="error" @click="$emit('sys-batch-delete')" v-auth:sys:batch:del>
        <Icon type="ios-remove-circle-outline"/>
        批量删除
      </Button>
    </GridItem>
  </Grid>

  <Drawer
      :title="modelValue.title"
      v-model="modelValue.state"
      width="420"
      :mask-closable="false"
      @on-close="modelValue.state = false; loading = false;"
      :styles="{height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'}">
    <Form ref="validForm" :model="modelValue.row" :rules="ruleValidate">

      <FormItem label="系统名称" label-position="top" prop="sysName" :error="error.sysName">
        <Input v-model="modelValue.row.sysName" placeholder="请输入系统名称"/>
      </FormItem>

      <FormItem label="系统编号" label-position="top" prop="remark" :error="error.remark">
        <Input v-model="modelValue.row.remark" placeholder="请输入系统编号"/>
      </FormItem>

      <FormItem label="系统首页路由地址" label-position="top" prop="url" :error="error.url">
        <Input v-model="modelValue.row.url" placeholder="系统首页路由地址"/>
      </FormItem>

      <FormItem label="系统描述" label-position="top">
        <Input type="textarea" v-model="modelValue.row.description" :rows="4" placeholder="请输入系统描述信息"/>
      </FormItem>

      <FormItem label="状态" label-position="top" :error="error.state">
        <Switch size="large" v-model="modelValue.row.state">
          <template #open>
            <span>开启</span>
          </template>
          <template #close>
            <span>关闭</span>
          </template>
        </Switch>
      </FormItem>
    </Form>
    <div class="demo-drawer-footer">
      <Button style="margin-right: 8px" @click="modelValue.state = false;loading=false;">关闭</Button>
      <Button type="primary" :loading="loading" @click="handlerSystem">保存</Button>
    </div>
  </Drawer>

</template>

<script>

export default {
  props: {
    modelValue: {
      type: Object,
      required: true,
    }
  },
  data() {
    return {
      error: {},
      loading: false,
      ruleValidate: {
        sysName: [
          {required: true, message: "系统名不能为空", trigger: 'blur'},
          {type: 'string', max: 100, message: '系统名过长', trigger: 'blur'},
        ],
        remark: [
          {required: true, message: "系统编号不能为空", trigger: 'blur'},
          {type: 'string', pattern: /^[a-z-]+[a-z]$/i, message: '系统编号由字母中划线组成', trigger: 'blur'},
        ],
        url: [
          {required: true, message: "系统首页地址不能为空", trigger: 'blur'},
          {type: "string", pattern: /^\/.*$/, message: "系统首页地址必须以/开头", trigger: 'blur'},
        ]
      }
    }
  },
  emits: ["sys-add", "sys-update", "sys-batch-delete"],
  methods: {
    resetError() {
      this.$refs.validForm.resetFields();
      this.error = {};
    },
    addSystem() {
      this.resetError();
      this.modelValue.state = true;
      this.modelValue.title = "添加系统";
      this.modelValue.row = {
        sysName: "",
        url: "",
        description: "",
        state: true,
      };
    },
    handlerSystem() {
      this.error = {};
      this.loading = true;
      // 进行表单校验
      this.$refs.validForm.validate((valid) => {
        if (valid) {
          if (this.modelValue.row.id == null) {
            this.handleSave();
          } else {
            this.handleUpdate();
          }
        } else {
          this.loading = false;
        }
      })
    },
    handleSave() {
      this.$api.addSystem(this.modelValue.row).then(ret => {
        this.loading = false;
        if (ret.data.status) {
          // 将 添加成功的对象 添加到 表格中
          this.$emit("sys-add", ret.data.data);
          // 关闭窗口
          this.modelValue.state = false;
        } else {
          this.error = ret.data.error;
        }
      })
    },
    handleUpdate() {
      this.$api.updateSystem(this.modelValue.row).then(ret => {
        this.loading = false;
        if (ret.data.status) {
          // 将 添加成功的对象 添加到 表格中
          this.$emit("sys-update", ret.data.data);
          // 关闭窗口
          this.modelValue.state = false;
        } else {
          this.error = ret.data.error;
        }
      })
    }
  },
}
</script>

<style>
.grid-item .ivu-grid-item-main {
  padding: 10px 0 !important;
}

.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>